<template>
	<div class="categorysContainer">
		<!-- 无法跳向外部连接  用uni-link插件 -->
		<navigator :url="categoryObj.titleSchemeUrl"><image class="bigBanner" :src="categoryObj.titlePicUrl" mode=""></image></navigator>
		<scroll-view class="categoryList" scroll-x="true" >
			<view class="categoryItem" v-for="category in categoryObj.itemList" :key="category.simpleDesc">
				<image class="common" :src="category.showPicUrl" mode=""></image>
				<text class="categoryItemText">{{category.name}}</text>
			</view>
			<view class="categoryItem common more">
				查看更多>
			</view>
		</scroll-view>
	
	</div>
</template>

<script>
	export default{
		data(){
			return{
				
			}
		},
		props:['categoryObj']
	}
</script>

<style lang="stylus">
	.categorysContainer
		margin-top 30upx
		.bigBanner
			width 100%
			height 370upx
		.categoryList
			white-space nowrap
			.common
				width 200upx
				height 200upx
				background-color #eee
				vertical-align top
			.more
				line-height 200upx
				vertical-align top
				text-align center
				font-size 24upx
			.categoryItem
				display inline-flex
				width 200upx
				flex-direction column
				margin 0 20upx
				.categoryItemText
					font-size 24upx
					//white-space 可以被继承，所以在此需要重置，允许文本换行
					white-space pre-wrap
					overflow hidden
					text-overflow ellipsis
					display -webkit-box
					-webkit-line-clamp 2
					-webkit-box-orient vertical

				
</style>
